<template>
  <div class="wrap">
    <Navbar :appTitle="title" :rtitle="rtitle" :rname="rname" />
    <div @click="checkedShow = !checkedShow">
      {{ checkedShow ? "取消" : "选择" }}
    </div>
    <div style="display: flex">
      <van-button @click="getList">刷新</van-button>
      <van-button @click="searchQuery">搜索</van-button>
      <van-button @click="searchReset">重置</van-button>
    </div>
    <pageList
      ref="pageList"
      :checkedShow="checkedShow"
      :operationTxt="operationTxt"
      :columns="columns"
      :listUrl="listUrl"
      @getCheckedValue="getCheckedValue"
      @handleList="handleList"
    >
    <!-- <div slot="head" slot-scope="{item}">{{item.createBy}}</div>
    <div slot="body" slot-scope="{item}">{{item.createBy}}</div>
    <div slot="label" slot-scope="{item}">{{item.createBy}}</div>
    <div slot="foot" slot-scope="{item}">{{item.createBy}}</div> -->
    </pageList>
  </div>
</template>

<script>
import pageList from "@/components/pageList";
import Navbar from "@/components/navBar/navBar_right";
export default {
  computed: {},
  components: { pageList, Navbar },
  data() {
    return {
      title: "测试",
      rtitle: "",
      rname: "", //search
      checkedShow: false, //列表是否支持选择
      operationTxt: "确定2", //选择按钮名称
      listUrl: "sys/dict/list", //列表接口
      columns: {
        titleKey: "description", //标题
        subtitleKey: "description", //副标题
        content: [
          //内容
          {
            name: "测试1",
            key: ["dictCode", "dictCode", "dictCode", "dictCode"],
          },
          {
            name: "测试2",
            key: ["dictCode", "dictCode"],
          },
          {
            name: "测试3",
            key: ["dictCode", "dictCode"],
          },
          {
            name: "测试4",
            key: ["dictCode", "dictCode"],
          },
          {
            name: "测试3",
            key: ["dictCode", "dictCode"],
          },
          {
            name: "测试4",
            key: ["dictCode", "dictCode"],
          },
        ],
        labelKey: ["createBy", "dictName"], //标签
        peopleKey: "createBy", //流程发起人
        flowStatusNameKey: "dictName", //流程状态
        // 多种操作
        operation: [
          {
            name: "待确认",
            icon: require("../../assets/qd.png"),
            remarks:
              "说明是的撒的撒打算大撒的多撒点打算大撒多撒打算打算打算的的撒打算大撒",
          },
          {
            name: "编辑项目",
            icon: require("../../assets/diandian.png"),
            color: "#FF4D4F",
          },
          {
            name: "删除项目",
            icon: require("../../assets/diandian.png"),
            remarks: "这是说明啊啊啊",
            color: "#FF4D4F",
          },
          {
            name: "操作日期",
            icon: require("../../assets/diandian.png"),
          },
        ],
        // 固定且只有一个操作
        // operationText:'发起流程'
      },
    };
  },
  methods: {
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    //列表点击事件
    handleList(id, item, type) {
      console.log(id, item, type, "(id:列表id,item:列表对象,type:事件名)");
      // if (type==='更多操作') {
      //   this.columns.operation = [
      //      {
      //       name: "删除项目",
      //       icon: require("../../assets/diandian.png"),
      //       remarks: "这是说明啊啊啊",
      //       color: "#FF4D4F",
      //     },
      //     {
      //       name: "操作日期",
      //       icon: require("../../assets/diandian.png"),
      //     },
      //   ]
      //   console.log(this.columns,'this.columns')
      // }
    },
    // 加载列表
    getList() {
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 搜索
    searchQuery(v) {
      // 搜索条件
      let queryParam = {
        name: "111",
        type: "1",
      };
      this.$refs.pageList.searchQuery(queryParam);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  height: 100vh;
  overflow-y: scroll;
}
</style>
